<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script type="text/javascript" src="/js/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/jquery-2.1.4.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/css/camp_index.css"/>
    <link href="/css/bootstrap.css" rel="stylesheet">
    <script src="/js/bootstrap.js"></script>
</head>
<body>
<div id="div">
    <div id="index1">
        <div class="header">
            <el-row :gutter="10">
                <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
                    <div class="grid-content bg-purple">
                        <span class="el-icon-arrow-left header_left"></span>
                    </div>
                </el-col>
                <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
                    <div class="grid-content bg-purple">
                        <span class="header_mid">营地住宿</span>
                    </div>
                </el-col>
                <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <div class="grid-content bg-purple-light">
                        <span class="el-icon-location-outline header_right" @click="showaddress()">{{cityName}}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="search">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <input type="text" placeholder="　输入您想要寻找的全国营地" class="search_content "/>
                    <div class="search_icon">
                        <span class="el-icon-search "></span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="title">
            <el-row :gutter="10">
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <span>营地列表</span>
                    <hr>
                </el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <span>营地地图</span>
                </el-col>
            </el-row>
        </div>
        <div class="content">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <img src="/img/camp_img1.png" width="100%"/>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="content_title">
                <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
                    <span>悦客沙坪坝区花马山房车露营基地</span>
                </el-col>
                <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                    <span class="el-icon-video-camera-solid">直播</span>
                    <span>　|　</span>
                    <span class="el-icon-bangzhu">全景</span>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<span class="introduce">
								&nbsp;&nbsp;&nbsp;&nbsp;本项目位于重庆市沙坪坝区大学城重庆师范大学西部。
								规划范围包括石码山水库全境及周边山体,规划地面积约160公顷。
								重庆花马车露营基地项目是重庆路约客房车营地有限公司规划布局建设的100个房:车露营地总部示范基地。
							</span>
                </el-col>
            </el-row>
        </div>
    </div>
    <!-- 地址选择 -->
    <div id="index2">
        <!-- 头部 -->
        <div class="header">
            <el-row :gutter="10">
                <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
                    <div class="grid-content bg-purple">
                        <span class="el-icon-arrow-left header_left" @click="show_index()"></span>
                    </div>
                </el-col>
                <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
                    <div class="grid-content bg-purple">
                        <span class="header_mid">地址选择</span>
                    </div>
                </el-col>
                <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                    <div class="grid-content bg-purple-light">
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 循环地址 -->
        <div class="address">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <table class="table table-hover">
                        <tr v-for="city in citys" @click="chooseaddress(city.city_name)">
                            <td v-text="city.city_name"></td>
                            <td class="jiantou">
                                <span class="el-icon-arrow-right"></span>
                            </td>
                        </tr>
                    </table>
                </el-col>
            </el-row>
        </div>

    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#div",
        data: {
            input4: '',
            input2: '',
            cityName: '重庆',
            citys: [{
                city_id: 1,
                city_name: '重庆'
            }, {
                city_id: 2,
                city_name: '北京'
            },
                {
                    city_id: 3,
                    city_name: '四川'
                },
            ]
        },
        created: function () {
            $.ajax({
                url: "/camp/selectAllCamp",
                type: "get",
                dataType: "json",
                success: function (data) {

                }
            });
        },
        methods: {
            showaddress: function () {
                $("#index1").css("display", "none");
                $("#index2").css("display", "block");
            },
            show_index: function () {
                $("#index1").css("display", "block");
                $("#index2").css("display", "none");
            },
            chooseaddress: function (cityname) {
                this.cityName = cityname;
                $("#index1").css("display", "block");
                $("#index2").css("display", "none");
            }
        },
        watch: {
            cityName: function () {

            }
        }

    })
</script>
</body>
</html>
